<template>
  <a-layout :class="['layout', device]">
    <!-- SideMenu -->
    <a-drawer
      v-if="isMobile()"
      placement="left"
      :wrap-class-name="`drawer-sider ${navTheme}`"
      :closable="true"
      :visible="collapsed"
      @close="drawerClose"
    >
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="false"
        :collapsible="true"
        @menuSelect="menuSelect"
      />
    </a-drawer>

    <side-menu
      v-else-if="isSideMenu()"
      mode="inline"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
      :collapsible="true"
    />

    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }"
    >
      <!-- layout header -->
      <global-header
        :mode="layoutMode"
        :menus="menus"
        :theme="theme"
        :collapsed="collapsed"
        :device="device"
        @toggle="toggle"
      />

      <!-- layout content -->
      <a-layout-content
        :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }"
      >
        <multi-tab v-if="multiTab" />
        <transition name="page-transition" mode="out-in" appear>
          <a-locale-provider :locale="zhCN">
            <route-view />
          </a-locale-provider>
        </transition>
      </a-layout-content>
    </a-layout>

    <!-- back to top -->
    <a-back-top id="back-to-top">
      <svg
        class="ant-back-top-inner icon"
        t="1565615595444"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4616"
        width="40"
        height="40"
      >
        <path
          d="M609.92 405.333333L640 376.96 512 256l-128 120.96L414.08 405.333333 512 312.96 609.92 405.333333z"
          fill="#1088e9"
          p-id="4617"
        />
        <path
          d="M243.626667 618.666667v-33.493334h149.333333V618.666667h-54.4v149.333333H298.666667v-149.333333zM421.12 640a87.893333 87.893333 0 0 1 17.493333-30.506667 80.853333 80.853333 0 0 1 28.373334-21.333333 89.173333 89.173333 0 0 1 37.76-7.466667 90.026667 90.026667 0 0 1 37.973333 7.466667 80 80 0 0 1 28.16 21.333333 87.893333 87.893333 0 0 1 17.493333 30.506667 109.866667 109.866667 0 0 1 6.186667 37.973333 106.666667 106.666667 0 0 1-6.186667 37.333334 87.893333 87.893333 0 0 1-17.493333 30.08 81.706667 81.706667 0 0 1-28.16 20.053333 93.44 93.44 0 0 1-37.973333 7.253333 92.373333 92.373333 0 0 1-37.76-7.253333 82.56 82.56 0 0 1-28.373334-20.053333 87.893333 87.893333 0 0 1-17.493333-30.08 106.666667 106.666667 0 0 1-6.186667-37.333334 109.866667 109.866667 0 0 1 6.186667-37.973333z m36.693333 60.373333a60.373333 60.373333 0 0 0 8.533334 19.626667 42.666667 42.666667 0 0 0 15.36 13.866667 52.48 52.48 0 0 0 46.08 0 42.666667 42.666667 0 0 0 15.36-13.866667 60.373333 60.373333 0 0 0 8.533333-19.626667 87.04 87.04 0 0 0 2.773333-21.333333 93.866667 93.866667 0 0 0-2.773333-23.253333 60.586667 60.586667 0 0 0-8.533333-20.053334 40.746667 40.746667 0 0 0-15.36-14.08 52.48 52.48 0 0 0-46.08 0 40.746667 40.746667 0 0 0-15.36 14.08 60.586667 60.586667 0 0 0-8.533334 20.053334 93.866667 93.866667 0 0 0-2.773333 23.253333 87.04 87.04 0 0 0 2.773333 20.693333z"
          fill="#1088e9"
          p-id="4618"
        />
        <path
          d="M712.96 585.173333a74.026667 74.026667 0 0 1 29.226667 5.12 54.4 54.4 0 0 1 19.626666 13.013334 50.986667 50.986667 0 0 1 11.093334 18.773333 70.4 70.4 0 0 1 0 42.666667 50.133333 50.133333 0 0 1-11.093334 18.986666 54.4 54.4 0 0 1-19.626666 13.013334 74.026667 74.026667 0 0 1-29.226667 5.12h-42.666667V768h-39.68v-182.826667z m-10.88 85.333334a89.813333 89.813333 0 0 0 13.226667 0 35.413333 35.413333 0 0 0 11.306666-4.053334 22.826667 22.826667 0 0 0 7.893334-8.32 37.12 37.12 0 0 0 0-28.16 22.826667 22.826667 0 0 0-7.893334-8.32 35.413333 35.413333 0 0 0-11.306666-4.053333 89.813333 89.813333 0 0 0-13.226667 0h-31.36v54.613333z"
          fill="#1088e9"
          p-id="4619"
        />
      </svg>
    </a-back-top>
  </a-layout>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice, AppDeviceEnquire } from '@/utils/mixin'
import config from '@/config/defaultSettings'

import RouteView from './route-view'
import MultiTab from '@/components/MultiTab'
import SideMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'

export default {
  name: 'BasicLayout',
  components: {
    RouteView,
    MultiTab,
    SideMenu,
    GlobalHeader
  },
  mixins: [mixin, mixinDevice, AppDeviceEnquire],

  data () {
    return {
      zhCN,
      production: config.production,
      theme: config.navTheme,
      collapsed: false,
      menus: []
    }
  },

  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters,
      user (state) { return this.$get(state, 'auth.user') }
    }),

    contentPaddingLeft () {
      if (!this.fixSidebar || this.isMobile()) return '0'
      if (this.sidebarOpened) return '256px'
      return '80px'
    }
  },

  watch: {
    sidebarOpened (val) {
      this.collapsed = !val
    }
  },

  async created () {
    const { $get, user, sidebarOpened, GenerateRoutes } = this
    const roles = { permissionList: $get(user, 'permission', []) }
    if (roles.permissionList === undefined) roles.permissionList = ['none']
    await GenerateRoutes({ roles }).then(() => {
      this.menus = $get(this.mainMenu.find(item => item.path === '/'), 'children', [])
    })
    this.collapsed = !sidebarOpened
  },

  mounted () {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }

    if (this.fixedHeader && process.client) {
      const body = document.getElementsByTagName('body')
      body && body[0] && (body[0].className += 'body-fixedHeader')
    }
  },

  methods: {
    ...mapActions('app', ['setSidebar']),
    ...mapActions('permission', ['GenerateRoutes']),

    toggle () {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },

    paddingCalc () {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '256px' : '80px'
      } else {
        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
      }
      return left
    },

    menuSelect () {
      if (!this.isDesktop()) {
        this.collapsed = false
      }
    },

    drawerClose () {
      this.collapsed = false
    }
  }
}
</script>

<style lang="less">
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

body {
  word-wrap: break-word;
}

.page-transition-enter-active,
.page-transition-leave-active {
  transition: opacity 0.8s;

  -webkit-transition: opacity 0.8s;
}

.page-transition-enter,
.page-transition-leave-to {
  opacity: 0;
}

.page-transition-enter-to,
.page-transition-leave {
  opacity: 1;
}

</style>
